import type { FC } from 'react';
import style from './index.less';
import React, { Fragment, useState, useEffect } from 'react';
import { Avatar, Button, Form, Input, message, Modal, Tag, Upload } from 'antd';
import {SearchOutlined} from '@ant-design/icons';
import { updateSearchBook} from './service';

interface Props {}
const Header: FC<Props> = () => {
  const userId = localStorage.getItem('user_id');
  // 输入框的值
  const [searchName, setsearchName] = useState('');

  useEffect(() => {
  }, []);
  //查询方法
  const getseatchBook = async(value: string)=>{
    const {code} = await updateSearchBook({bookname:value})
    code === 1000 ? message.success('该类型审核成功') : message.error('该类型审核败')
  }
  return (
    <div className={style.container}>
      
      <div className={style.marginTop}>
        <div className={style.title}>书籍分享社区</div>
          <div className={style.mine}>
            <Input
              placeholder="搜索🔍书籍名称、书籍作者"
              style={{borderRadius:20}}
              onChange={e => {
                console.log('我是现在输入框中的',e.target.value)

                setsearchName(e.target.value)

              }}
              suffix={(
                <Button
                  type="primary"
                  shape="circle"
                  icon={<SearchOutlined />}
                  onClick={(e) => {
                    console.log('查询',searchName)
                    getseatchBook(searchName)
                  }}
                />
              )}
            />
          </div>
      </div>

    </div>
  );
};

export default Header;
